<template>
  <div style="margin: 15px">
    <div style="margin-bottom: 15px;">
      <Input style="width: 200px;" v-model="searchValue" placeholder="请输入新闻名称"/>
      <Select  style="width: 200px;" v-model="status" placeholder="请选择新闻状态">
        <Option value="0">待审核</Option>
        <Option value="2">未通过</Option>
        <Option value="1">审核通过</Option>
      </Select>
      <Button @click="search" type="success">搜索</Button>
      <Button @click="add" type="primary" style="float: right;">添加新闻</Button>
    </div>
    <Table border :columns="newsTitle" :data="newsList"></Table>
    <page-com :total="total" @page-change="pageChange"></page-com>
    <Modal v-model="identity" fullscreen :title="modalTitle" @on-ok="submit" @on-cancel="cancel">
      <Form :model="newsForm" :label-width="80">
        <Row>
          <Col span="8">
            <FormItem label="新闻标题">
              <Input v-model="newsForm.title" placeholder="请输入新闻标题"/>
            </FormItem>
          </Col>
        </Row>
        <FormItem v-if="flag" label="新闻内容">
          <editor :dataCon="context" :flag="flag" :catchData="newsData"/>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="review" width="1200" title="预览">
      <div v-html="reviewContext.context"></div>
    </Modal>
  </div>
</template>

<script>
  import Editor from '@/components/editor'
  import PageCom from '@/components/page'
  import {formatDate} from '_com/date'
  export default {
    name: 'news-list',
    components: {
      Editor,
      PageCom
    },
    data () {
      return {
        identity: false,
        review: false,
        modalTitle: '',
        searchValue: '',
        total: 0,
        size: 10,
        number: 0,
        status: '',
        flag: false,
        reviewContext: {},
        reason: '',
        context: '',
        newsForm: {},
        newsTitle: [
          {
            title: '新闻标题',
            align: 'center',
            tooltip: true,
            key: 'title'
          },
          {
            title: '添加人',
            align: 'center',
            tooltip: true,
            key: 'createName'
          },
          {
            title: '添加时间',
            key: 'createTime',
            align: 'center',
            tooltip: true,
            render: (h, params) => {
              return h('div', formatDate(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'))
            }
          },
          {
            title: '修改人',
            align: 'center',
            tooltip: true,
            key: 'updateName'
          },
          {
            title: '修改时间',
            align: 'center',
            tooltip: true,
            key: 'updateTime',
            render: (h, params) => {
              return h('div', formatDate(new Date(params.row.updateTime), 'yyyy-MM-dd hh:mm'))
            }
          },
          {
            title: '状态',
            key: 'status',
            width: 140,
            align: 'center',
            render: (h, params) => {
              const row = params.row
              const type = row.status === '1' ? 'success' : row.status === '0' ? 'warning' : 'error'
              const text = row.status === '1' ? '通过审核' : row.status === '0' ? '待审核' : '未通过'
              return h('div', [
                h('Button', {
                  props: {
                    type: type,
                    icon: 'ios-radio-button-on',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      if (!row.reason) {
                        return false
                      }
                      this.$Message.error({
                        duration: 20,
                        closable: true,
                        render: h => {
                          return h('span', [row.reason])
                        }
                      })
                    }
                  }
                }, text)
              ])
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 180,
            align: 'center',
            render: (h, params) => {
              const row = params.row
              const disabled = row.status === '1' ? 1 : 0
              return h('div', [
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'small',
                    disabled: Boolean(disabled)
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.reviewContext = params.row
                      this.reason = params.row.reason
                      this.review = true
                    }
                  }
                }, '预览'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small',
                    disabled: Boolean(disabled)
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      let row = params.row
                      this.editor()
                      this.context = row.context
                      this.newsForm.title = row.title
                      this.newsForm.id = row.id
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '你确定要删除吗？',
                        okText: '确定',
                        cancelText: '取消',
                        onOk: () => {
                          this.remove(params.row.id)
                        }
                      })
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
        newsList: []
      }
    },
    mounted() {
      this.newsPage()
    },
    methods: {
      newsPage() {
        this.$get('/api/api/news/org/page', {
          title: this.searchValue,
          status: this.status,
          size: this.size,
          number: this.number
        }).then((res) => {
          if (res.code === 0) {
            this.newsList = res.data
            this.total = res.total
          }
        })
      },
      newsData(value) {
        this.context = value
      },
      title(title) {
        this.modalTitle = title
        this.identity = true
        this.flag = true
      },
      add() {
        this.title('添加新闻')
      },
      editor() {
        this.title('编辑新闻')
      },
      submit() {
        if (this.modalTitle === '添加新闻') {
          this.theAdd()
        } else {
          this.theEditor()
        }
      },
      theAdd() {
        this.$post('/api/api/news/add', {
          title: this.newsForm.title,
          context: this.context
        }).then((res) => {
          if (res.code === 0) {
            this.$Message.success('添加成功')
            this.newsPage()
            this.cancel()
          } else {
            this.$Message.error('添加成功')
          }
        }).catch((res) => {
          this.$Message.error('添加成功')
        })
      },
      theEditor() {
        this.$put('/api/api/news/update', {
          title: this.newsForm.title,
          context: this.context,
          id: this.newsForm.id
        }).then((res) => {
          if (res.code === 0) {
            this.$Message.success('修改成功')
            this.newsPage()
            this.cancel()
          } else {
            this.$Message.error('修改成功')
          }
        }).catch((res) => {
          this.$Message.error('修改成功')
        })
      },
      remove(id) {
        this.$deletes('/api/api/news/delete', {id: id}).then((res) => {
          if (res.code === 0) {
            this.$Message.success('删除成功')
            this.newsPage()
          } else {
            this.$Message.success('删除失败')
          }
        }).catch((res) => {
          this.$Message.success('删除失败')
        })
      },
      search() {
      },
      cancel() {
        this.flag = false
        this.newsForm = {}
        this.context = ''
      },
      submitReview(e) {
        if (e === '2') {
          if (!this.reason) {
            this.$Message.warning('请输入未通过的理由')
            return false
          }
        }
        this.$put('/api/api/news/edit', {
          status: e,
          reason: this.reason,
          id: this.reviewContext.id
        }).then((res) => {
          if (res.code === 0) {
            this.$Message.success('审核成功')
            this.newsPage()
            this.reviewCancel()
          } else {
            this.$Message.error('审核失败')
          }
        }).catch((rel) => {
          this.$Message.error('审核失败')
        })
      },
      reviewCancel() {
        this.review = false
        this.reviewContext = {}
      },
      pageChange(data) {
        this.number = data + 1
        this.newsPage()
      }
    }
  }
</script>

<style scoped>
</style>
